<script setup>
import { ref } from "vue"
import { BoxResizeDrawer } from "@ui/base"
//
const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
</script>


<template>
    <div flex flex-wrap w-900 h-400 bg-red p-10 gap-10 >
        <p w-full flex gap-8 min-w-full>
            <button @click="visible1 = !visible1">bottom</button>
        <button @click="visible2 = !visible2">top</button>
        <button @click="visible3 = !visible3">left</button>
        <button @click="visible4 = !visible4">right</button>
        </p>
        
        <div relative w-200 h-200 overflow-hidden bg-white>
            <BoxResizeDrawer v-model:visible="visible1" min-size="10px">
                <div w-full h-full min-h-50 bg-amber></div>
            </BoxResizeDrawer>
        </div>
        <div relative w-200 h-200 overflow-hidden bg-white>
            <BoxResizeDrawer v-model:visible="visible2" direction="top" min-size="10px">
                <div w-full h-full min-h-50 bg-blue></div>
            </BoxResizeDrawer>
        </div>
        <div relative w-200 h-200 overflow-hidden bg-white>
            <BoxResizeDrawer v-model:visible="visible3" direction="left" min-size="10px">
                <div w-full h-full min-h-50 bg-pink></div>
            </BoxResizeDrawer>
        </div>
        <div relative w-200 h-200 overflow-hidden bg-white>
            <BoxResizeDrawer v-model:visible="visible4" direction="right" min-size="10px">
                <div w-full h-full min-h-50 bg-green></div>
            </BoxResizeDrawer>
        </div>
    </div>
</template>